<template>
  <div class="search-box" v-if="!getIsPhone">
    <div class="input-area">
      <input 
        class="hover-style"
        type="text" 
        placeholder="请输入关键字"
        :value="value"
        @input="handelUpdateValue($event)"
      >
    </div>
    <div class="search-icon border-left hover-style" @click="handleSearch">
      <i class="iconfont iconstbar_sousuo"></i>
    </div>
  </div>
  <div class="search-box" v-else>
    <span class="icon">
      <i class="iconfont iconstbar_sousuo"></i>
    </span>
    <bc-modal v-show="showSearchBox">
      <div class="input-search" @click.stop="doThis">
        <label for="" class="label">
          <input 
            type="text" 
            class="input-style" 
            placeholder="请输入关键字"
            :value="value"
            @input="handelUpdateValue($event)"
            >
          <span class="icon">
            <i class="iconfont iconstbar_sousuo"></i>
          </span>
        </label>
        <span class="btn" @click="handleSearch">搜索</span>
      </div>
    </bc-modal>
  </div>
</template>

<script>
import BcModal from '@/components/base/bc-modal/bc-modal'
import { mapGetters } from 'vuex';
export default {
  components: {
    BcModal
  },
  props: {
    inputValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showSearchBox: false,
      value: this.inputValue
    }
  },
  methods: {
    // handleSearchBox() {
    //   this.showSearchBox = true
    // },
    handelUpdateValue(e) {
      this.value = e.target.value
    },
    handleSearch() {
      this.showSearchBox = false  
      this.$emit('click', this.value)
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      //  @click.stop="doThis"
      if (this.$el.contains(e.target)) this.showSearchBox = !this.showSearchBox
    })
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@import '~@/assets/styles/mixins.styl'
@media screen and (min-width 750px)
  .search-box 
    min-width 144px 
    height 36px 
    box-sizing border-box 
    border-radius 3px 
    border 1px solid $color-divide-line
    background-color $color-text-button
    display flex
    align-items center
    position relative 
    .input-area 
      min-width 108px
      text-align center
      color $color-sub-grey
      input 
        margin-left 10px
        background none 
      placeholder-color() 
    .search-icon
      width 36px 
      height 36px
      text-align center
      box-sizing border-box 
      display flex 
      align-items center 
      justify-content center 
      .iconfont 
        font-size 14px
        color $color-theme-dark
@media screen and (max-width 750px)
  .search-box 
    .icon 
      extend-click()
      .iconfont 
        font-size 18px 
    .input-search 
      position fixed
      top 48px 
      left 0
      right 0
      height 48px 
      background #fff
      display flex 
      align-items center
      justify-content space-between
      box-sizing border-box 
      padding-left 10px
      z-index 1000
      .label 
        flex 1
        position relative 
        input  
          height 36px
          width 100%
          box-sizing border-box 
          padding-left 40px
          color $color-theme-dark
        .icon 
          position absolute
          top 50%
          transform translateY(-50%)
          left 10px
          .iconfont 
            color #cccdd0 
            font-size 16px
      .btn 
        width 72px 
        text-align center
        color #000
</style>